<template>
    <div class="edit-org-modal" ref="editAddModal">
        <a-modal 
            v-model:open="state.isShow"
            width="700px"
            wrapClassName="custom-modal"
            :bodyStyle="{height:'500px',overflowY:'overlay',overflowX:'hidden',paddingRight:'6px'}"
            :title="state.formState.id != undefined && state.formState.id > 0? '编辑机构':'添加机构'" 
            cancelText="取消"
            okText="确定"
            :getContainer="() => $refs.editAddModal"
            @ok="handleOk"
            @cancel="handleCancel"
        >
        <a-form
                ref="formRef"
                :model="state.formState"
                name="org-edit-form"
                autocomplete="off"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
            >
                <a-row>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item
                            label="上级机构"
                            name="pid"
                            :label-col="{ span: 3 }"
                            :wrapper-col="{ span: 21 }"
                        >
                            <a-cascader
                                v-model:value="state.formState.pid"
                                :options="state.orgData"
                                placeholder="请选择上级机构"
                                :field-names="{ label: 'name', value: 'id', children: 'children' }"
                                :show-search="true"
                                :change-on-select="true"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item
                            label="机构名称"
                            name="name"
                            :label-col="{ span: 3 }"
                            :wrapper-col="{ span: 21 }"
                            :rules="[{ required: true, message: '机构名称不能为空', trigger: 'blur' }]"
                        >
                            <a-input v-model:value="state.formState.name" placeholder="机构名称" allow-clear />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item
                            label="负责人"
                            name="directorName"
                            :label-col="{ span: 3 }"
                            :wrapper-col="{ span: 21 }"
                            :rules="[{ required: true, message: '负责人不能为空', trigger: 'blur' }]"
                        >
                            <a-input v-model:value="state.formState.directorName" placeholder="负责人" allow-clear @click="selectUsers"/>
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <a-form-item
                            label="机构编码"
                            name="code"
                            :rules="[{ required: true, message: '机构编码不能为空', trigger: 'blur' }]"
                        >
                            <a-input v-model:value="state.formState.code" placeholder="机构编码" allow-clear />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <a-form-item
                            label="级别"
                            name="level"
                        >
                            <a-input-number v-model:value="state.formState.level" placeholder="级别" class="w-full" />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item
                            label="机构类型"
                            name="type"
                            :label-col="{ span: 3 }"
                            :wrapper-col="{ span: 21 }"
                        >
                            <a-select
                                v-model:value="state.formState.type"
                                placeholder="请选择机构类型"
                                allow-clear
                                show-search
                            >
                                <template v-for="item in useMapDictList('org_type')" :key="item.value">
                                    <a-select-option :value="item.value">{{ item.label }}</a-select-option>
                                </template>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <a-form-item
                            label="排序"
                            name="orderNo"
                        >
                            <a-input-number v-model:value="state.formState.orderNo" placeholder="排序" class="w-full" />
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <a-form-item
                            label="状态"
                            name="status"
                        >
                            <a-radio-group v-model:value="state.formState.status">
                                <a-radio :value="1">启用</a-radio>
                                <a-radio :value="2">禁用</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <a-form-item
                            label="备注"
                            name="remark"
                            :label-col="{ span: 3 }"
                            :wrapper-col="{ span: 21 }"
                        >
                            <a-textarea v-model:value="state.formState.remark" placeholder="请输入备注内容" :rows="2" allow-clear />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
        <select-dept-users ref="selectDeptUsersRef" @save="handleSaveDeptUsers" mode="single"/>
    </div>
</template>

<script setup lang="ts">
import { reactive ,ref, useTemplateRef} from 'vue';
import type { FormInstance } from 'ant-design-vue';
import { useMapDictList } from '@/hooks';
import type { OrgDataType } from '../type';
import { findParentPath, showMsg } from '@/utils';
import { cloneDeep } from 'lodash';
import { apiSysOrgAddPost, apiSysOrgUpdatePost } from '@/api/sys/sysOrg';
import selectDeptUsers from '@/components/select-org-user/index.vue'

const emits = defineEmits<{
    (e:"handleQuery"):void
}>()
const props = withDefaults(defineProps<{
    orgData:OrgDataType[]
}>(),{})
const selectDeptUsersRef = useTemplateRef('selectDeptUsersRef')
const formRef = ref<FormInstance>()
const editAddModal = ref()
const state = reactive({
    isShow: false,
    formState: {

    }as OrgDataType,
    orgData:[] as any[],
})

const handleOk =async () => {
    await formRef.value?.validate()
    const submitData = cloneDeep(state.formState)
    if(Array.isArray(state.formState.pid) && state.formState.pid.length > 0){
        submitData.pid = state.formState.pid[state.formState.pid.length - 1]
    }else {
        submitData.pid = 0
    }
    if(state.formState.id != undefined && state.formState.id > 0){
        await apiSysOrgUpdatePost(submitData)
    }else{
        await apiSysOrgAddPost(submitData)
    }
    showMsg("操作成功",'success')
    emits('handleQuery')
    handleCancel()
}

const handleCancel = () => {
    state.isShow = false
    // @ts-ignore
    state.formState = {}
    state.orgData = []
}

const handleOpen = (row:any) => {
    state.orgData = (row.tenantId ? props.orgData.filter(i=>i.tenantId == row.tenantId) : props.orgData )?? []
    state.formState = JSON.parse(JSON.stringify(row))
    // 处理级联数据格式
    state.formState.pid = findParentPath(state.orgData,row.pid)
    state.isShow = true
    formRef.value?.clearValidate()
}
const selectUsers = ()=>{
    selectDeptUsersRef.value?.handleOpen(state.formState.directorId)
}
const handleSaveDeptUsers = (val:any)=>{
    state.formState.directorId = val[0].id
    state.formState.directorName = val[0].realName
}
defineExpose({
    handleOpen,
})
</script>

<style lang="scss" scoped>
    
</style>